{% extends "base.html" %}
{% load i18n %}
<head>
    {% block title %}
        <title>案例搜索</title>
    {% endblock %}
    {% block js %}
        <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(document).bind('scroll', onScroll);
                querycase();
                var $container = $('#tiles');
                $container.imagesLoaded(function () {
                    $container.masonry({
                        itemSelector: '.caseblock',
                        gutterWidth: 14
                    });
                });
            });
            function querycase() {
                $.ajax({
                    type: "get",
                    url: "/search/",
                    data: { q: $("#search").val()},
                    dataType: "html",
                    success: function (data) {
                        if (data) {
                            flag = true;
                        }
                        var boxdata = $(data);
                        $('#tiles').empty();
                        $('#tiles').append(data).masonry('reload');
                    }
                });
                //alert(url);
            }
            var flag = true;
            function onScroll(event) {
                // Check if we're within 100 pixels of the bottom edge of the broser window.
                var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
                if (closeToBottom && flag) {
                    flag = false;
                    // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
                    var items = $('#tiles dl');
                    var pageNumber = Math.floor(items.length / 20);
                    var result = items.length % 20;
                    if (pageNumber != 0 && result == 0) {
                        pageNumber = pageNumber + 1;
                        $.ajax({
                            type: "get",
                            url: "/search/",
                            data: {q: $("#search").val(), page: pageNumber},
                            dataType: "html",
                            success: function (data) {
                                if (data) {
                                    flag = true;
                                }
                                var boxdata = $(data);
                                $('#tiles').append(data).masonry('reload');
                            }
                        });
                    }
                }
            }
        </script>
    {% endblock %}
</head>
<body>

{% block detail %}
    <div class="main">
        <div class="caseWrap" id="tiles">

        </div>
    </div>

{% endblock %}
</body>